<script setup lang="ts">
import { ref,onMounted } from 'vue';

const faultTabs = ref(['近一周', '近一个月', '近三个月', '近半年', '近一年'])
const faultIndex = ref(0)
function clickFault(index: number) {
    faultIndex.value = index
    if(index == 0){
        faultBeginTime.value = lastWeekDate
    }
    else if(index == 1){
        faultBeginTime.value = lastMonthDate
    }
    else if(index == 2){
        faultBeginTime.value = lastThreeMonthsDate
    }
    else if(index == 3){
        faultBeginTime.value = lastSixMonthsDate
    }
    else if(index == 4){
        faultBeginTime.value = lastYearDate
    }
    getQueryDeviceWarnRankInfo()
}

const operationTabs = ref(['近一周', '近一个月', '近三个月', '近半年', '近一年'])
const operationIndex = ref(0)
function clickOperation(index: number) {
    operationIndex.value = index
    if(index == 0){
        operateBeginTime.value = lastWeekDate
    }
    else if(index == 1){
        operateBeginTime.value = lastMonthDate
    }
    else if(index == 2){
        operateBeginTime.value = lastThreeMonthsDate
    }
    else if(index == 3){
        operateBeginTime.value = lastSixMonthsDate
    }
    else if(index == 4){
        operateBeginTime.value = lastYearDate
    }
    getQueryDeviceUseRankInfo()
}


const today = new Date();

// 当前时间
const currentDate = today.toISOString().split('T')[0];

// 最近一周
const lastWeek = new Date(today);
lastWeek.setDate(today.getDate() - 7);
const lastWeekDate = lastWeek.toISOString().split('T')[0];

// 最近一个月
const lastMonth = new Date(today);
lastMonth.setMonth(today.getMonth() - 1);
const lastMonthDate = lastMonth.toISOString().split('T')[0];

// 最近三个月
const lastThreeMonths = new Date(today);
lastThreeMonths.setMonth(today.getMonth() - 3);
const lastThreeMonthsDate = lastThreeMonths.toISOString().split('T')[0];

// 最近半年
const lastSixMonths = new Date(today);
lastSixMonths.setMonth(today.getMonth() - 6);
const lastSixMonthsDate = lastSixMonths.toISOString().split('T')[0];

// 最近一年
const lastYear = new Date(today);
lastYear.setFullYear(today.getFullYear() - 1);
const lastYearDate = lastYear.toISOString().split('T')[0];


import { QueryDeviceWarnRankInfo, QueryDeviceUseRankInfo } from "@/api";

// 搜索
const searchForm = ref({
    GroupId: 1, //0为煤场设备，1为输煤程控设备
    BeginStartTime: '',
    EndStartTime:'',

    PageNum: 1, //当前页码
    PageSize: 6 //PageSize
})

//list
const faultData1 = ref<any>([])
const faultData2 = ref<any>([])
const faultBeginTime = ref('')
faultBeginTime.value = lastWeekDate
const getQueryDeviceWarnRankInfo = () => {
    QueryDeviceWarnRankInfo({
        GroupId: 1, //0为煤场设备，1为输煤程控设备
        BeginStartTime: faultBeginTime.value ,
        EndStartTime: currentDate,
        PageNum: 1, //当前页码
        PageSize: 6 
    }).then(res=>{
        console.log('list-------',res.data)
        faultData1.value = res.data
    })
    QueryDeviceWarnRankInfo({
        GroupId: 0, //0为煤场设备，1为输煤程控设备
        BeginStartTime: faultBeginTime.value,
        EndStartTime: currentDate,
        PageNum: 1, //当前页码
        PageSize: 6 
    }).then(res=>{
        console.log('list-------',res.data)
        faultData2.value = res.data
    })
}


const operate1 = ref<any>([])
const operate2 = ref<any>([])
const operateBeginTime = ref('')
operateBeginTime.value = lastWeekDate
const getQueryDeviceUseRankInfo = () => {
    QueryDeviceUseRankInfo({
        GroupId: 1, //0为煤场设备，1为输煤程控设备
        BeginStartTime: operateBeginTime.value ,
        EndStartTime: currentDate
    }).then(res=>{
        console.log('list-------',res.data)
        operate1.value = res.data
    })
    QueryDeviceUseRankInfo({
        GroupId: 0, //0为煤场设备，1为输煤程控设备
        BeginStartTime: operateBeginTime.value ,
        EndStartTime: currentDate
    }).then(res=>{
        console.log('list-------',res.data)
        operate2.value = res.data
    })
}




onMounted(()=>{
    getQueryDeviceWarnRankInfo()
    getQueryDeviceUseRankInfo()
})


</script>
<template>
    <div class="flex_bg">
        <div class="device_tabs">
            <div class="name">设备故障排行榜:</div>
            <ul >
                <li :class="faultIndex == index ? 'hover' : ''" v-for="(item, index) in faultTabs"
                    @click="clickFault(index)">
                    {{ item }}
                </li>
            </ul>
        </div>

        <div class="device_flex">
            <div class="device_item">
                <h3>输煤程控设备故障排行榜</h3>
                <div class="table_info">
                    <table>
                        <tr>
                            <th>设备编号</th>
                            <th>设备名称</th>
                            <th>所属煤场</th>
                            <th>报警次数</th>
                        </tr>
                        <tr v-for="(item,index) in faultData1" :key="index">
                            <td>{{ item.deviceCode }}</td>
                            <td>{{ item.deviceName }}</td>
                            <td>{{ item.bunkerName }}</td>
                            <td>{{ item.warnNum }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="device_item">
                <h3>煤场安全设备故障排行榜</h3>
                <div class="table_info">
                    <table>
                        <tr>
                            <th>设备编号</th>
                            <th>设备名称</th>
                            <th>所属煤场</th>
                            <th>报警次数</th>
                        </tr>
                        <tr v-for="(item,index) in faultData2" :key="index">
                            <td>{{ item.deviceCode }}</td>
                            <td>{{ item.deviceName }}</td>
                            <td>{{ item.bunkerName }}</td>
                            <td>{{ item.warnNum }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <div class="flex_bg mt15">
        <div class="device_tabs">
            <div class="name">设备运行时长排行榜:</div>
            <ul >
                <li :class="operationIndex == index ? 'hover' : ''" v-for="(item, index) in operationTabs"
                    @click="clickOperation(index)">
                    {{ item }}
                </li>
            </ul>
        </div>

        <div class="device_flex">
            <div class="device_item">
                <h3>输煤程控设备运行时长排行榜</h3>
                <div class="table_info">
                    <table>
                        <tr>
                            <th>设备编号</th>
                            <th>设备名称</th>
                            <th>所属煤场</th>
                            <th>报警次数</th>
                        </tr>
                        <tr v-for="(item,index) in operate1" :key="index">
                            <td>{{ item.deviceCode }}</td>
                            <td>{{ item.deviceName }}</td>
                            <td>{{ item.bunkerName }}</td>
                            <td>{{ item.warnNum }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="device_item">
                <h3>煤场安全设备运行时长排行榜</h3>
                <div class="table_info">
                    <table>
                        <tr>

                            <th>设备编号</th>
                            <th>设备名称</th>
                            <th>所属煤场</th>
                            <th>报警次数</th>
                        </tr>
                        <tr v-for="(item,index) in operate2" :key="index">
                            <td>{{ item.deviceCode }}</td>
                            <td>{{ item.deviceName }}</td>
                            <td>{{ item.bunkerName }}</td>
                            <td>{{ item.warnNum }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>

</template>
<style scoped lang="scss">
.device_flex{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    h3{
        font-weight: bold;
        font-size: 20px;
        color: #092A5F;
        line-height: 30px;
        text-align: center;
        padding:25px 0 10px;
    }
    .device_item{
        width: 49%;
    }
}
</style>